<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>进度显示修复测试 v2</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            background: #f5f5f5;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .test-section {
            margin: 20px 0;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        .progress-bar {
            width: 100%;
            height: 20px;
            background: #f0f0f0;
            border-radius: 10px;
            overflow: hidden;
            margin: 10px 0;
        }
        .progress-fill {
            height: 100%;
            background: #409eff;
            transition: width 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 12px;
            font-weight: bold;
        }
        .task-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px;
            border: 1px solid #eee;
            border-radius: 5px;
            margin: 5px 0;
        }
        .task-info {
            flex: 1;
        }
        .task-name {
            font-weight: bold;
            margin-bottom: 5px;
        }
        .task-details {
            font-size: 12px;
            color: #666;
        }
        .button {
            padding: 8px 16px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            margin: 5px;
            font-size: 14px;
        }
        .button-primary {
            background: #409eff;
            color: white;
        }
        .button-success {
            background: #67c23a;
            color: white;
        }
        .button-warning {
            background: #e6a23c;
            color: white;
        }
        .log {
            background: #f8f9fa;
            border: 1px solid #dee2e6;
            border-radius: 4px;
            padding: 10px;
            margin: 10px 0;
            max-height: 200px;
            overflow-y: auto;
            font-family: monospace;
            font-size: 12px;
        }
        .status {
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;
            font-weight: bold;
        }
        .status-downloading {
            background: #e1f3ff;
            color: #409eff;
        }
        .status-completed {
            background: #f0f9ff;
            color: #67c23a;
        }
        .status-error {
            background: #fef0f0;
            color: #f56c6c;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>进度显示修复测试 v2</h1>
        <p>这个页面用于测试下载进度的显示修复效果</p>

        <div class="test-section">
            <h3>1. 响应式更新测试</h3>
            <p>测试 Vue 响应式系统是否正确更新进度显示</p>
            <button class="button button-primary" onclick="testReactivity()">开始响应式测试</button>
            <button class="button button-warning" onclick="clearLog()">清空日志</button>
            
            <div id="reactivity-test">
                <div class="task-item">
                    <div class="task-info">
                        <div class="task-name">响应式测试任务</div>
                        <div class="task-details">
                            状态: <span class="status status-downloading" id="reactivity-status">等待中</span>
                            | 进度: <span id="reactivity-progress">0%</span>
                            | 大小: <span id="reactivity-size">0 MB / 10 MB</span>
                        </div>
                    </div>
                    <div class="progress-bar">
                        <div class="progress-fill" id="reactivity-progress-bar" style="width: 0%">0%</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="test-section">
            <h3>2. 任务列表测试</h3>
            <p>模拟真实的任务列表更新</p>
            <button class="button button-primary" onclick="testTaskList()">开始任务列表测试</button>
            <button class="button button-success" onclick="addTestTask()">添加测试任务</button>
            
            <div id="task-list">
                <!-- 任务列表将在这里动态生成 -->
            </div>
        </div>

        <div class="test-section">
            <h3>3. 事件监听器测试</h3>
            <p>测试 Electron API 事件监听器</p>
            <button class="button button-primary" onclick="testEventListeners()">测试事件监听器</button>
            <button class="button button-warning" onclick="simulateProgressEvent()">模拟进度事件</button>
            
            <div id="event-status">
                <p>Electron API 状态: <span id="api-status">检查中...</span></p>
                <p>事件监听器状态: <span id="listener-status">未设置</span></p>
            </div>
        </div>

        <div class="test-section">
            <h3>4. 调试日志</h3>
            <div class="log" id="debug-log">
                <div>等待测试开始...</div>
            </div>
        </div>
    </div>

    <script>
        // 全局变量
        let testTasks = []
        let reactivityTestInterval = null
        let taskListTestInterval = null

        // 日志函数
        function log(message) {
            const logElement = document.getElementById('debug-log')
            const timestamp = new Date().toLocaleTimeString()
            logElement.innerHTML += `<div>[${timestamp}] ${message}</div>`
            logElement.scrollTop = logElement.scrollHeight
            console.log(`[${timestamp}] ${message}`)
        }

        function clearLog() {
            document.getElementById('debug-log').innerHTML = '<div>日志已清空...</div>'
        }

        // 检查 Electron API
        function checkElectronAPI() {
            const apiStatus = document.getElementById('api-status')
            if (window.electronAPI) {
                apiStatus.textContent = '可用'
                apiStatus.style.color = '#67c23a'
                log('Electron API 可用')
                return true
            } else {
                apiStatus.textContent = '不可用'
                apiStatus.style.color = '#f56c6c'
                log('Electron API 不可用')
                return false
            }
        }

        // 响应式测试
        function testReactivity() {
            log('开始响应式测试...')
            
            if (reactivityTestInterval) {
                clearInterval(reactivityTestInterval)
            }
            
            let progress = 0
            const progressBar = document.getElementById('reactivity-progress-bar')
            const progressText = document.getElementById('reactivity-progress')
            const sizeText = document.getElementById('reactivity-size')
            const statusElement = document.getElementById('reactivity-status')
            
            statusElement.textContent = '下载中'
            statusElement.className = 'status status-downloading'
            
            reactivityTestInterval = setInterval(() => {
                progress += 2
                if (progress > 100) progress = 100
                
                const downloadedSize = (10 * 1024 * 1024 * progress) / 100 // 10MB total
                const downloadedMB = (downloadedSize / (1024 * 1024)).toFixed(1)
                
                progressBar.style.width = progress + '%'
                progressBar.textContent = progress + '%'
                progressText.textContent = progress + '%'
                sizeText.textContent = `${downloadedMB} MB / 10 MB`
                
                log(`进度更新: ${progress}% (${downloadedMB} MB / 10 MB)`)
                
                if (progress >= 100) {
                    clearInterval(reactivityTestInterval)
                    statusElement.textContent = '已完成'
                    statusElement.className = 'status status-completed'
                    log('响应式测试完成')
                }
            }, 100)
        }

        // 任务列表测试
        function testTaskList() {
            log('开始任务列表测试...')
            
            if (taskListTestInterval) {
                clearInterval(taskListTestInterval)
            }
            
            // 清空现有任务
            testTasks = []
            updateTaskListDisplay()
            
            // 创建测试任务
            for (let i = 1; i <= 3; i++) {
                const task = {
                    id: `test-task-${i}`,
                    name: `测试任务 ${i}`,
                    status: 'downloading',
                    progress: 0,
                    downloadedSize: 0,
                    totalSize: (i * 5) * 1024 * 1024, // 5MB, 10MB, 15MB
                    startTime: Date.now()
                }
                testTasks.push(task)
            }
            
            updateTaskListDisplay()
            
            // 模拟进度更新
            taskListTestInterval = setInterval(() => {
                let allCompleted = true
                
                testTasks.forEach(task => {
                    if (task.status === 'downloading') {
                        task.progress += Math.random() * 5 + 1
                        task.downloadedSize = (task.totalSize * task.progress) / 100
                        
                        if (task.progress >= 100) {
                            task.progress = 100
                            task.status = 'completed'
                        } else {
                            allCompleted = false
                        }
                    }
                })
                
                updateTaskListDisplay()
                log(`任务列表更新: ${testTasks.filter(t => t.status === 'completed').length}/${testTasks.length} 完成`)
                
                if (allCompleted) {
                    clearInterval(taskListTestInterval)
                    log('任务列表测试完成')
                }
            }, 200)
        }

        // 添加测试任务
        function addTestTask() {
            const taskId = `manual-task-${Date.now()}`
            const task = {
                id: taskId,
                name: `手动添加任务 ${testTasks.length + 1}`,
                status: 'downloading',
                progress: 0,
                downloadedSize: 0,
                totalSize: 8 * 1024 * 1024, // 8MB
                startTime: Date.now()
            }
            
            testTasks.push(task)
            updateTaskListDisplay()
            log(`添加测试任务: ${task.name}`)
        }

        // 更新任务列表显示
        function updateTaskListDisplay() {
            const taskListElement = document.getElementById('task-list')
            taskListElement.innerHTML = ''
            
            testTasks.forEach(task => {
                const taskElement = document.createElement('div')
                taskElement.className = 'task-item'
                
                const downloadedMB = (task.downloadedSize / (1024 * 1024)).toFixed(1)
                const totalMB = (task.totalSize / (1024 * 1024)).toFixed(1)
                
                let statusClass = 'status-downloading'
                if (task.status === 'completed') statusClass = 'status-completed'
                else if (task.status === 'error') statusClass = 'status-error'
                
                taskElement.innerHTML = `
                    <div class="task-info">
                        <div class="task-name">${task.name}</div>
                        <div class="task-details">
                            状态: <span class="status ${statusClass}">${getStatusText(task.status)}</span>
                            | 进度: ${task.progress.toFixed(1)}%
                            | 大小: ${downloadedMB} MB / ${totalMB} MB
                        </div>
                    </div>
                    <div class="progress-bar">
                        <div class="progress-fill" style="width: ${task.progress}%">${task.progress.toFixed(1)}%</div>
                    </div>
                `
                
                taskListElement.appendChild(taskElement)
            })
        }

        // 获取状态文本
        function getStatusText(status) {
            const statusMap = {
                'pending': '等待中',
                'downloading': '下载中',
                'completed': '已完成',
                'error': '失败',
                'paused': '已暂停'
            }
            return statusMap[status] || status
        }

        // 事件监听器测试
        function testEventListeners() {
            log('测试事件监听器...')
            
            if (!checkElectronAPI()) {
                log('Electron API 不可用，跳过事件监听器测试')
                return
            }
            
            const listenerStatus = document.getElementById('listener-status')
            
            try {
                // 检查是否有事件监听器方法
                if (window.electronAPI.onDownloadProgress) {
                    listenerStatus.textContent = '已设置'
                    listenerStatus.style.color = '#67c23a'
                    log('事件监听器方法可用')
                } else {
                    listenerStatus.textContent = '方法不可用'
                    listenerStatus.style.color = '#f56c6c'
                    log('事件监听器方法不可用')
                }
            } catch (error) {
                listenerStatus.textContent = '设置失败'
                listenerStatus.style.color = '#f56c6c'
                log(`事件监听器测试失败: ${error.message}`)
            }
        }

        // 模拟进度事件
        function simulateProgressEvent() {
            log('模拟进度事件...')
            
            if (!window.electronAPI) {
                log('Electron API 不可用，无法模拟事件')
                return
            }
            
            // 模拟一个进度更新事件
            const mockEvent = {
                taskId: 'mock-task-' + Date.now(),
                status: 'downloading',
                progress: Math.floor(Math.random() * 100),
                downloadedSize: Math.floor(Math.random() * 50 * 1024 * 1024),
                totalSize: 50 * 1024 * 1024,
                downloadedSegments: Math.floor(Math.random() * 100),
                totalSegments: 100,
                downloadSpeed: Math.floor(Math.random() * 1024 * 1024) + 512 * 1024
            }
            
            log(`模拟事件数据: ${JSON.stringify(mockEvent, null, 2)}`)
            
            // 如果有事件监听器，触发它
            if (window.electronAPI.onDownloadProgress) {
                try {
                    // 这里我们只是记录，因为实际的事件触发需要后端配合
                    log('事件监听器已设置，但需要后端配合才能触发实际事件')
                } catch (error) {
                    log(`模拟事件失败: ${error.message}`)
                }
            }
        }

        // 页面加载时初始化
        window.addEventListener('load', function() {
            log('页面加载完成，开始初始化...')
            checkElectronAPI()
            log('初始化完成')
        })
    </script>
</body>
</html>
